<template>
  <div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>类型</th>
            <th>图书状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in lists" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.bookName}}</td>
            <td>{{item.author}}</td>
            <td>{{item.bookType}}</td>
            <td>{{item.type}}</td>
            <td>
              <button>修改</button>
              <button>查看</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <Pagination></Pagination>
      </div>
  </div>
</template>


<script>
import { mapState, mapActions} from 'vuex'
import Pagination from '../../components/pagination/Pagination.vue'
export default {
    components: {
      Pagination
    },
    computed: {
        ...mapState({
          lists: state => state.book.bookLists
        })
    },
    methods: {
      ...mapActions([
        'getBookList'
      ]),
      getBookData(){
        this.getBookList();
      }
    },
    mounted () {
      this.getBookData();
    }
}
</script>
